
import React, { Component } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Button, Form, Input, Row, Col, Card} from 'antd';
import { connect } from 'dva';
import moment from 'moment';
// import styles from './style.less';

import PublicTableWrapper from '@/components/TableForm'


const routes = [
    {
      path: '',
      breadcrumbName: 'Rpt Log',
    },
    {
      path: '',
      breadcrumbName: 'Rpt Log',
    }
]

@connect(({ messageandrecord }) => ({
    messageandrecord
}))


class Management extends Component {
    state = {
        id: this.props.match.params.id,
        // data: [
        //     {
        //         key: '1',
        //         bluetooth: 'ffffff000135',
        //         temperature: '18℃',
        //         nk: '102',
        //         gateway: '1',
        //         scantime: '2016-09-21  08:50:51',
        //     },
        //     {
        //         key: '1',
        //         bluetooth: 'ffffff000135',
        //         temperature: '18℃',
        //         nk: '102',
        //         gateway: '1',
        //         scantime: '2016-09-21  08:50:51',
        //     }
        // ],
        columns: [
            {
                title: 'UUID',
                dataIndex: 'bluetooth',
            },
            {
                title: 'Temp',
                dataIndex: 'temperature',
                render: (_, record) => (
                    <span>{record.temperature}℃</span>
                )
            },
            {
                title: 'NK',
                dataIndex: 'nk',
            },
            {
                title: 'GW#',
                dataIndex: 'gateway',
            },
            {
                title: 'Scan time',
                dataIndex: 'scantime',
                render: (_, record) => (
                    <span>{record.logintime === "" ? '-' : moment.utc(Number(record.scantime)).format("YYYY-MM-DD hh:mm:ss")}</span>
                )
            }
        ],

        loading: false,
        data: [],
        page: 1,
        pageSize: 10,
        search: "",
        totalCount: 1,
    }


    componentDidMount () {
        this.initfetch()
    }

    initfetch = () => {
        const { dispatch } = this.props
        const { page, pageSize, search, id } = this.state
        this.setState({loading: true})
        dispatch({
            type: 'messageandetails/fetch',
            payload: {
                limit: pageSize,
                offset: (page - 1) * pageSize,
                id,
                search,
              },
        }).then(res => {
            if (res.status === 200) {
                this.setState({
                    data: res.data,
                    loading: false,
                    totalCount: res.totalPageSize,
                })
            } else {
                this.setState({
                    data: [],
                    loading: false,
                    totalCount: 0,
                })
            }
        })
    }

    
    // 分页
    paginationChange = (page, pageSize) => {
        this.setState({
            page,
            pageSize,
        })
        
        const { dispatch } = this.props
        const { search, id } = this.state
        this.setState({loading: true})
        dispatch({
            type: 'messageandetails/fetch',
            payload: {
                limit: pageSize,
                offset: (page - 1) * pageSize,
                id,
                search,
              },
        }).then(res => {
            if (res.status === 200) {
                this.setState({
                    data: res.data,
                    loading: false,
                    totalCount: res.totalPageSize,
                })
            } else {
                this.setState({
                    data: [],
                    loading: false,
                    totalCount: 0,
                })
            }
        })
    }

    handleSearch = () => {
        const { form } = this.props
        const mapObj = {
            number: 'beaconId__contains',
        }
        const searchList = []
        form.validateFields((err, values) => {
            if (err) { return}
            // if (values.search_useraccout !== "" && values.search_useraccout !== undefined) {
                Object.keys(values).forEach(key => {
                    if (values[key] !== undefined && values[key] !== '' ) {
                      searchList.push(`${mapObj[key]}:${values[key]}`);
                    }
                  })
            // }

        })
        const searchString = searchList.length === 0 ? '' : `,${searchList.join(',')}`
        // search record
        this.setState({
            search: searchString,
        })
        // fetch data
        const { dispatch } = this.props
        const { page, pageSize, id } = this.state
        this.setState({loading: true})
        dispatch({
            type: 'messageandetails/fetch',
            payload: {
                limit: pageSize,
                offset: (page - 1) * pageSize,
                id,
                search: searchString
              },
        }).then(res => {
            if (res.status === 200) {
                this.setState({
                    data: res.data,
                    loading: false,
                    totalCount: res.totalPageSize,
                })
            } else {
                this.setState({
                    data: [],
                    loading: false,
                    totalCount: 0,
                })
            }
        })
        
    }

    handleReset = () => {
        this.props.form.resetFields()
    }

    render () {
        const formItemLayout = { labelCol: { span: 5 }, wrapperCol: { span: 17 } }
        const { getFieldDecorator } = this.props.form

        return (
            <PageHeaderWrapper title="Rpt Log" breadcrumb={{ routes }}>
                <Card>
                    <Row gutter={24}>
                        <Col span={8}>
                            <Form.Item label="UUID" {...formItemLayout}>
                                {getFieldDecorator('number')(
                                    <Input placeholder="Input UUID" />
                                )}
                            </Form.Item>
                        </Col>
                        {/* <Col span={8}>
                            <Form.Item label="Scan date" {...formItemLayout}>
                                {getFieldDecorator('date')(
                                    <DatePicker style={{ width: '99%' }} placeholder="Scan date" />
                                )}
                            </Form.Item>
                        </Col> */}
                        <Col span={8}>
                            <Form.Item style={{ display: 'flex' }}>
                                <Button type="primary" htmlType="submit" onClick={this.handleSearch}>
                                Query
                                </Button>
                                <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
                                Reset
                                </Button>
                            </Form.Item>
                        </Col>
                    
                    </Row>
                    
                    <PublicTableWrapper
                        loading={this.state.loading}
                        columns={this.state.columns}
                        data={this.state.data}
                        currentpageSize={this.state.pageSize}
                        total={this.state.totalCount}
                        paginationChange={(page, pageSize) => this.paginationChange(page, pageSize)}
                    />
                </Card>
            </PageHeaderWrapper>
        )

    }

}



// export default Management
export default Form.create()(Management)